/**
 * 查询用户信息
 * 	通过ajax请求，得到对应的用户信息
 */
$.ajax({
	type:"get", // 请求的类型
	url:"js/user.json", // 请求的路径
	data:{ // 传递给后台的参数
		"name":"admin"
	},
	success:function(result){ // 回调函数，可以得到请求的结果。即result是请求得到的数据
	// 如果请求成功，则加载表格
	if (result.code == 1) {
		// 加载表格，将数据填充到表格中
		loadTable(result.data);
	} else {
		$("#userList").html("暂未查询到用户信息！");
	}
		
	}
});
/**
 * 加载表格，将数据填充到表格中
 * @param {Object} userList
 */
function loadTable(userList) {
	// 定义表格对象
	var table = $('<table id="myTable" class="table table-striped table-bordered table-hover"></table>');
	// 定义caption
	var caption = $("<caption>用户列表</caption>");
	// 设置表格中
	table.append(caption);
	// 定义表头
	var thead = "<thead> <tr> <th>编号</th><th>姓名</th> <th>密码</th> <th>年龄</th><th>性别</th><th>操作</th> </tr> </thead>";
	// 将表头追加到表格中
	table.append(thead);
	
	// 准备表格内容
	var tbody = $("<tbody></tbody>");
	
	// 遍历用户集合，准备对应的tr
	for (var i = 0; i < userList.length; i++) {
		var user = userList[i];
		// 准备tr
		var tr = "<tr id='tr_"+user.userId+"'><td>"+user.userId+"</td><td>"+user.userName+"</td><td>"+user.userPwd;
		tr += "</td><td>"+user.userAge+"</td><td>"+user.userSex;
		tr += "</td><td><button type='button' class='btn btn-warning btn-xs' onclick='openUpdateDialog("+user.userId+")'><span class='glyphicon glyphicon-pencil'></span> 修改</button>";
		tr += " &nbsp;<button type='button' class='btn btn-danger btn-xs' onclick='deleteUser("+user.userId+")'><span class='glyphicon glyphicon-trash'></span> 删除</button></td></tr>";
		// 将tr追加到tbody中
		tbody.append(tr);
	}
	
	 // 将tbody追加到table中
	 table.append(tbody);
	 
	
	// 将表格设置到面板的div中
	$("#userList").append(table);
	
}


/**
 * 打开添加用户的模态框
 */
function openUserDialog(){
	// 1. 修改模态框的标题
	$("#myModalLabel").html("<span class='glyphicon glyphicon-plus-sign'></span> 添加用户");
	// 2. 显示编号文本框
	$("#userIdTxt")[0].style.display = "block";
	// 设置用户编号的隐藏域为空
	$("#key").val("");
	
	// 手动打开模态框
	$("#myModal").modal('show');
}

/**
 * 打开修改用户的模态框
 * 	1. 修改模态框的标题
 *  2. 设置修改操作对应的tr（点击修改按钮时，传递编号；设置每一个tr对象的id属性值与编号对应）
 *  3. 获取tr中td单元格的值
 *  4. 设置模态框中表单元素的值
 */				  
function openUpdateDialog(userId) {
	// 1. 修改模态框的标题
	$("#myModalLabel").html("<span class='glyphicon glyphicon-pencil'></span> 修改用户");
	
	// 2. 获取要修改的行
	var tr = $("#tr_" + userId);
	
	// 3. 获取tr中所有的td元素
	var tds = tr.children();
	// console.log(tds);
	// console.log(tds[2].innerHTML);
	
	// 4. 设置模态框中表单元素的值
	$("#userId").val(tds[0].innerHTML);
	$("#userName").val(tds[1].innerHTML);
	$("#userPwd").val(tds[2].innerHTML);
	$("#userAge").val(tds[3].innerHTML);
	// 判断性别
	if (tds[4].innerHTML == "男") {
		$("[name='userSex']:eq(0)").prop("checked",true);
	} else {
		$("[name='userSex']:eq(1)").prop("checked",true);
	}
	
	// 隐藏编号文本框
	$("#userIdTxt")[0].style.display = "none";
	
	// 设置用户编号的隐藏域为编号的值
	$("#key").val(userId);
	
	// 手动打开模态框
	$("#myModal").modal('show');
}			  
				  

	
	
/**
 * 添加用户
 * 	1. 表单元素的校验
 *  2. 关闭模态框
 *  3. 添加表格的一行数据
 *  4. 发送请求给后台，后台执行添加操作，在数据库中添加新的数据
 */	
$("#submitBtn").click(function(){
	/**
	 * 1. 表单元素的校验
	 */
	var userId = $("#userId").val();
	if (isEmpty(userId)) {
		$("#msg").html("编号不能为空！");
		return;
	}
	var userName = $("#userName").val();
	if (isEmpty(userName)) {
		$("#msg").html("姓名不能为空！");
		return;
	}
	var userPwd = $("#userPwd").val();
	if (isEmpty(userPwd)) {
		$("#msg").html("密码不能为空！");
		return;
	}
	var userAge = $("#userAge").val();
	if (isEmpty(userAge)) {
		$("#msg").html("年龄不能为空！");
		return;
	}
	var userSex = $("[name='userSex']:checked").val();
	if (isEmpty(userSex)) {
		$("#msg").html("请选择性别！");
		return;
	}
	// 清空提示信息
	$("#msg").html("");
	
	/**
	 * 2. 关闭模态框
	 */
	$("#myModal").modal('hide');
	
	
	/**
	 * 判断当前操作是添加还是修改
	 * 	获取隐藏域的值
	 * 		如果为空，添加操作，添加表格的一行记录
	 * 		如果不为空，修改操作，修改指定行的数据
	 */
	if ($("#key").val()) { // 修改操作
		/**
		 * 修改指定行的数据
		 */
		// 获取隐藏域的值，并得到对应的tr对象
		var tr = $("#tr_" + $("#key").val());
		// 修改具体单元格的值
		tr.children()[1].innerHTML = userName;
		tr.children()[2].innerHTML = userPwd;
		tr.children()[3].innerHTML = userAge;
		tr.children()[4].innerHTML = userSex;
		
	} else { // 添加操作
		/**
		 * 添加表格的一行数据
		 */
		// 准备tr对象
		var tr = "<tr id='tr_"+userId+"'><td>"+userId+"</td><td>"+userName+"</td><td>"+userPwd;
		tr += "</td><td>"+userAge+"</td><td>"+userSex;
		tr += "</td><td><button type='button' class='btn btn-warning btn-xs' onclick='openUpdateDialog("+userId+")'><span class='glyphicon glyphicon-pencil'></span> 修改</button>";
		tr += " &nbsp;<button type='button' class='btn btn-danger btn-xs' onclick='deleteUser("+userId+")'><span class='glyphicon glyphicon-trash'></span> 删除</button></td></tr>";
		// 将tr追加到表格中
		$("#myTable").append(tr);
	}
	
	
	
});
				  

/**
 * 删除用户
 * @param {Object} userId
 */
function deleteUser(userId) {
	// 弹出询问框，询问是否其否删除
	$.confirm({
	    title: "删除用户",
	    content: '您确认要删除该记录吗？',
	    buttons: {
	        yes: {
	            keys: ['y'],
	            action: function () {
	                // 删除用户记录（移除行）
					$("#tr_" + userId).remove();
	            }
	        },
	        no: {
	            keys: ['N']
	        }
	    }
	});
	
}				  


/**
 * 判断字符串是否为空
 * 	如果为空，返回true
 * 	如果不为空，返回false
 * 
 *  trim()：去除字符串的前后空格
 * @param {Object} str
 */
function isEmpty(str) {
	if (str == null || str.trim() == "") {
		return true;
	}
	return false;
}				  
				  
	
				
				
				
				